<template>
  <el-descriptions :title="title" :border="true" :column="3">
    <el-descriptions-item v-for="(item, index) in itemDetail" :key="index" :label="item.label">
      <!-- 如果是图片链接，则解析并横向渲染多个图片 -->
      <template v-if="isImageList(item.value)">
        <div style="display: flex; gap: 5px;">
          <img v-for="(url, index) in splitImageUrls(item.value)" :key="index" :src="url" alt="image"
            style="max-width: 100px; max-height: 100px;" />
        </div>
      </template>
      <!-- 如果不是图片链接，直接展示文本 -->
      <template v-else>
        {{ item.value }}
      </template>
    </el-descriptions-item>
  </el-descriptions>
</template>

<script>
export default {
  name: "DescriptionItem",
  props: {
    title: {
      type: String,
      required: true
    },
    itemDetail: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 判断是否为图片链接的辅助函数
    isImageList(urls) {
      return typeof urls === 'string' && urls.includes("http") && /\.(jpg|jpeg|png|gif|bmp|webp|svg)(,|$)/i.test(urls);
    },
    // 将图片链接字符串解析为数组
    splitImageUrls(urls) {
      return urls.split(',').map(url => url.trim());
    }
  },
}
</script>

<style lang="scss" scoped></style>
